<script setup lang="ts">

import Header from "@/components/agreement/components/Header.vue";
import {showImagePreview} from "vant";
import {ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import api from '@/api/index.js'

const router = useRouter()
const route = useRoute()
const fileUrl = import.meta.env.VITE_FILE_URL
const images = ref([
  'https://templatelab.com/wp-content/uploads/2015/11/Coupon-10.jpg',
  'https://templatelab.com/wp-content/uploads/2015/11/Coupon-01.jpg',
  'https://tse4-mm.cn.bing.net/th/id/OIP-C._cxT5-Hfl7-rAb5ebswU9wAAAA?rs=1&pid=ImgDetMain',
])

function handelswip(index) {
  showImagePreview({
    images: detail.value?.productImage.split(',').map(e=>`${fileUrl}/${e}`),
    startPosition: index
  });
}

const htmlDetail = ref('<img src="https://templatelab.com/wp-content/uploads/2015/11/Coupon-10.jpg"/><img src="https://tse4-mm.cn.bing.net/th/id/OIP-C._cxT5-Hfl7-rAb5ebswU9wAAAA?rs=1&pid=ImgDetMain"/>')

function onBuy() {
  console.log('onBuy')
  router.push({
    path: '/activityVerifyScenicordel',
    query: {

      productid: route.query.id, //商品id
      numberMax: 999,
      productName: 'coupon', //区分活动预约与共享预约
    },
  });
}
const detail = ref(null)
function  getDetail(){
  api.getCouponDetail({id:route.query.id}).then(res=>{
    detail.value = res.data
  })
}
getDetail()
</script>

<template>
  <div style="overflow-y: scroll;height: 100vh">
    <div style="display: flex;flex-direction: column;align-items: start">
      <Header title="详情"/>


    </div>
    <div v-if="detail">
      <div class="contentCoupon">

        <div style="width: 100%;box-sizing: border-box;">

          <van-space direction="vertical" style="width: 100%;">
            <div>
              <van-swipe v-if="detail.productImage" :autoplay="3000" indicator-color="white" >
                <van-swipe-item v-for="(item, index) in detail.productImage.split(',').map(e=>`${fileUrl}/${e}`)" :key="index">
                  <van-image

                      width="100%"
                      height="25rem"
                      class="img" :src="item" @click="()=>{handelswip(index)}" fit="cover"/>
                </van-swipe-item>
              </van-swipe>
            </div>
            <div class="card">
              <van-space direction="vertical">
                <div class="name">{{detail.couponName}}</div>
                <div style="display: flex;width: 100%">
                  <div class="preferential">
                    <div class="icon">
                      ￥
                    </div>
                    <div class="price">
                      {{detail.marketPrice?.toFixed(2)}}
                    </div>
                  </div>
                  <div style="width: 10px"></div>
                  <div class="original">  {{detail.unitPriceStandard?.toFixed(2)}}</div>
                </div>
                <div style="font-size: 10px;color: grey">
                  已售{{detail.sellCount??0}}
                </div>
              </van-space>
            </div>
            <div class="card">
              <van-space direction="vertical" style="width: 100%">
                <div style="display: flex;">
                  <div style="font-size: 12px;color: grey">
                    配送方式
                  </div>
                  <div style="width: 10px"></div>
                  <div style="font-size: 12px">
                    线下扫码核销
                  </div>
                </div>
              </van-space>
            </div>
            <div class="card" v-if="detail.childCoupon?.length">
              <van-space direction="vertical" style="width: 100%">
                <div style="font-weight: bold"> 券包内容</div>
                <van-space v-for="item in detail.childCoupon" :key="item.goodsId">
                  <van-image
                      fit="cover"
                      width="100px" height="80px" :src="`${fileUrl}/${item.productImage}`" :radius="5"></van-image>
                  <van-space direction="vertical" style="align-items: start">
                    <div style="font-size: 13px;color: grey;font-weight: bold">{{item.couponName}}</div>
                    <div style="font-size: 13px;color: grey">有效时间：{{item.validStartTime}}-{{item.validEndTime}}</div>
                  </van-space>
                </van-space>

              </van-space>
            </div>
            <div class="card" style="width: 100%">
              <van-space direction="vertical" style="width: 100%">
                <div style="font-weight: bold;width: 100%">
                  商品详情
                </div>
                <div class="detail">
                  <div v-html="detail.productDetail"></div>
                </div>


              </van-space>
            </div>
          </van-space>

        </div>

      </div>
      <van-sticky :offset-bottom="0" position="bottom">
        <div
            style="display: flex;width: 100%;background: white;padding:5px 20px 5px 20px;box-sizing: border-box;align-items: center">
          <div class="column" @click="()=>{router.push('/')}">
            <van-icon name="home-o"/>
            <div class="icon-text">首页</div>
          </div>
          <div style="width: 20px"></div>
          <a href="tel:123465" style="color: black">
            <div class="column">
              <van-icon name="phone-circle-o"/>
              <div class="icon-text">客服</div>
            </div>
          </a>
          <div style="flex-grow: 1"></div>
          <van-button type="primary" round @click="onBuy"> 立即购买</van-button>
        </div>
      </van-sticky>
    </div>
    <div v-else>
      <van-skeleton :row="20"></van-skeleton>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import url('@/views/activityPages/style/card.css');

.contentCoupon {
  height: 100vh;
  overflow: auto;
  display: flex;
  align-items: start;
  flex-direction: column;
  background-color: #f5f5ef;


}

.detail {
  :deep(img)  {
    max-width: 100%;
  }
}

.name {
  word-break: break-all;
  font-size: 1.6rem;
  color: #333333;
  font-weight: bold;
}

.preferential {

  display: flex;
  align-items: baseline;
  font-size: 1.2rem;
  color: #ED6316;
  padding-left: .5rem;

  .icon {
    flex-shrink: 0;
    font-size: 1.4rem;
  }

  .price {
    flex-shrink: 0;
    font-size: 2.2rem;
    margin-right: .2rem;
  }
}

.original {
  text-decoration: line-through;
  color: #999999;
  font-size: 1.4rem;
}

.icon-text {
  font-size: 8px;
  padding-top: 2px;
}
</style>